
import { ModeDarkIcon, ModeLightIcon } from "tdesign-icons-react";
import SwitchCell from "../SwitchCell";
import "./index.scss";
import { connect } from "react-redux";
import { updateSlideCollapse, updateThemeMode } from "../../../../../store/modules/app/action";

interface IDesignSetting {
    // 主题
    themeMode: string;
    // 主题action
    updateThemeMode: (newMode: string) => void;
}

/**
 * 外观设置
 * @returns 
 */
const DesignSetting: React.FC<IDesignSetting> = (props) => {
  const { themeMode, updateThemeMode } = props;

  return (
    <div className="setting__container">
      {/* 主题 */}
      <div className="section-item">
        <h3 className="section-item__title">主题</h3>
        <div className="section-item__content">
          <ul className="theme-list">
            <li className="theme-list__item" onClick={() => updateThemeMode('light')}>
              <div className={`theme-icon ${themeMode === 'light' ? 'is-active' : ''}`}>
                <ModeLightIcon></ModeLightIcon>
              </div>
              <p className="theme-name">浅色</p>
            </li>
            <li className="theme-list__item" onClick={() => updateThemeMode('dark')}>
              <div className={`theme-icon ${themeMode === 'dark' ? 'is-active' : ''}`}>
                <ModeDarkIcon></ModeDarkIcon>
              </div>
              <p className="theme-name">深色</p>
            </li>
          </ul>

          <SwitchCell label="深色侧边栏" />
          <SwitchCell label="深色顶栏" />
        </div>
      </div>

      {/* 内置主题 */}
      <div className="section-item">
        <h3 className="section-item__title">内置主题</h3>
        <div className="section-item__content">
          <ul className="inner-theme-list">
            <li className="theme-item">
              <div className="theme-item__icon">
                <div className="color-value"></div>
              </div>
              <p className="theme-item__name">默认</p>
            </li>
            <li className="theme-item is-active">
              <div className="theme-item__icon">
                <div className="color-value"></div>
              </div>
              <p className="theme-item__name">默认</p>
            </li>
            <li className="theme-item">
              <div className="theme-item__icon">
                <div className="color-value"></div>
              </div>
              <p className="theme-item__name">默认</p>
            </li>
            <li className="theme-item">
              <div className="theme-item__icon">
                <div className="color-value"></div>
              </div>
              <p className="theme-item__name">默认</p>
            </li>
            <li className="theme-item">
              <div className="theme-item__icon">
                <div className="color-value"></div>
              </div>
              <p className="theme-item__name">默认</p>
            </li>
            <li className="theme-item">
              <div className="theme-item__icon">
                <div className="color-value"></div>
              </div>
              <p className="theme-item__name">默认</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = (state: any) => state.app;
const mapDispatchToProps = { updateSlideCollapse, updateThemeMode };
export default connect(mapStateToProps, mapDispatchToProps)(DesignSetting);